<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" href="/static/image/code.png">
</head>
<body class="body">

<div class="layui-row layui-col-space12">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <!-- 表格 -->
        <table id="orgTable" lay-filter="orgTable"></table>
        <!-- 表格工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="expandAll">全部展开</button>
                <button class="layui-btn layui-btn-sm" lay-event="foldAll">全部折叠</button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="addOrg">添加组织机构
                </button>
            </div>
        </script>
    </div>
</div>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加下级</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/module.js"></script>
<script type="text/javascript">
    // layui方法
    layui.use(['table', 'layer', 'treetable', 'form', 'treeSelect', 'comm'], function () {

            // 操作对象
            var table = layui.table
                , layer = layui.layer
                , $ = layui.jquery
                , treetable = layui.treetable
                , form = layui.form
                , treeSelect = layui.treeSelect
                , comm = layui.comm;

            var renderTable = function () {
                treetable.render({
                    treeColIndex: 1,
                    treeSpid: -1,
                    treeIdName: 'id',
                    treePidName: 'pid',
                    treeDefaultClose: false,
                    treeLinkage: false,
                    elem: '#orgTable',
                    url: '/org/queryAll',
                    toolbar: '#toolbar',
                    page: false,
                    cols: [
                        [
                            {field: 'id', checkbox: true},
                            {field: 'name', title: '机构名称', width: '15%'},
                            {field: 'code', title: '机构代码', width: '15%'},
                            {field: 'type', title: '机构类型', width: '15%'},
                            {field: 'remark', title: '备注', width: '20%'},
                            {
                                fixed: 'right',
                                title: '操作',
                                width: '15%',
                                align: 'center',
                                toolbar: '#barOption'
                            }
                        ]
                    ]
                });
            }

            renderTable();


            //头工具栏事件
            table.on('toolbar(orgTable)', function (obj) {
                switch (obj.event) {
                    case 'expandAll':
                        treetable.expandAll('#orgTable');
                        break;
                    case 'foldAll':
                        treetable.foldAll('#orgTable');
                        break;
                    case 'refresh':
                        renderTable();
                        break;
                    case 'addOrg':
                        addOrg(true, -1);
                        break;
                }
            });

            //监听工具条
            table.on('tool(orgTable)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                if (layEvent === 'del') {
                    delOrg(data.id);
                } else if (layEvent === 'edit') {
                    editOrg(data);
                } else if (layEvent === 'add') {
                    addOrg(false, data.id);
                }
            });

            var renderTreeSelect = function (pid) {
                treeSelect.render({
                    // 选择器
                    elem: '#pOrgTree',
                    // 数据
                    data: '/org/getTreeData',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '修改默认提示信息',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
                        console.log(d.current);
                    },
                    // 加载完成后的回调函数
                    success: function (d) {
                        treeSelect.checkNode('pOrgTree', pid);
                    }
                });
            };

            /**
             * 添加机构数据
             */
            function addOrg(isRoot, pid) {
                // 清空
                document.getElementById("orgDetailForm").reset();
                if (isRoot) {
                    $('#pOrgItem').attr('style', 'display:none');
                } else {
                    // 父菜单名称
                    $('#pOrgItem').attr('style', 'display:block');
                    // 移除多余的treeSelect
                    if ($('.layui-treeSelect')) {
                        $('.layui-treeSelect').remove();
                    }
                    // 加载并选中
                    renderTreeSelect(pid);
                }

                renderSelect(null);

                comm.open($('#orgDetail'), function (index, layero) {
                    var formData = comm.getFormData('orgDetailForm');
                    formData.pid = pid == -1 ? pid : treeSelect.zTree('pOrgTree').getSelectedNodes()[0].id;
                    // 新增
                    comm.post('/org/editOrg?oper=0', formData, function (respData) {
                        if (respData.code == 0) {
                            // 提示成功
                            layer.msg("操作成功");
                            // 关闭弹框
                            layer.close(index);
                            // 刷新表格
                            renderTable();
                        }
                    });
                });
            }

            /**
             * 编辑组织机构
             * @param data 数据
             */
            function editOrg(data) {
                var pid = data.pid;
                // 父机构名称
                if (pid == -1) {
                    // 一级不显示父菜单名称
                    $('#pOrgItem').attr('style', 'display:none');
                } else {
                    // 一级以下显示父菜单名称
                    $('#pOrgItem').attr('style', 'display:block');
                    // 移除多余的treeSelect
                    $('.layui-treeSelect').remove();
                    // 加载并选中
                    renderTreeSelect(pid);
                }
                renderSelect(data.dictKey);
                // 机构名称
                $('#name').val(data.name);
                // 机构代码
                $('#code').val(data.code);
                // 备注
                $('#remark').val(data.remark);

                comm.open($('#orgDetail'), function (index, layero) {
                    var formData = comm.getFormData('orgDetailForm');
                    formData.id = data.id;
                    formData.pid = pid == -1 ? pid : treeSelect.zTree('pOrgTree').getSelectedNodes()[0].id;
                    // 修改数据
                    comm.post('/org/editOrg?oper=1', formData, function (respData) {
                        if (respData.code == 0) {
                            // 提示成功
                            layer.msg("操作成功");
                            // 关闭弹框
                            layer.close(index);
                            // 刷新表格
                            renderTable();
                        }
                    });

                });
            }

            /**
             * 删除机构
             * @param id 机构主键
             */
            function delOrg(id) {
                layer.confirm("确认删除吗", function (index, layero) {
                    comm.post('/org/editOrg?oper=2', {id: id}, function (respData) {
                        if (respData.code == 0) {
                            // 提示成功
                            layer.msg("操作成功");
                            // 关闭弹框
                            layer.close(index);
                            // 刷新表格
                            renderTable();
                        } else if (respData.code == 500 || respData.code == -1) {
                            // 提示失败
                            layer.msg(respData.msg);
                            // 关闭弹框
                            layer.close(index);
                        }
                    });
                });
            }

            /**
             * 初始化下拉框
             */
            function renderSelect(dictkey) {
                $('select[name="type"]').empty();
                // 新增
                comm.get('/dict/queryAll?typeCode=orgType', function (respData) {
                    var options = '';
                    $.each(respData.data, function (i, item) {
                        if (dictkey != null && item.dictKey == dictkey) {
                            options += '<option value="' + item.dictKey + '" selected>' + item.dictValue + '</option>'
                        } else {
                            options += '<option value="' + item.dictKey + '">' + item.dictValue + '</option>'
                        }
                    });
                    $('select[name="type"]').append(options);
                    form.render('select');
                });
            }

        }
    );


</script>
</body>
<div id="orgDetail" style="display: none">
    <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
        <form id="orgDetailForm" class="layui-form" action="">
            <div class="layui-form-item">
            </div>
            <div id="pOrgItem" class="layui-form-item">
                <label class="layui-form-label">父机构</label>
                <div class="layui-input-block">
                    <input type="text" id="pOrgTree" lay-verify="pOrgTree" lay-filter="pOrgTree"
                           autocomplete="off"
                           placeholder="请输入父机构" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">机构名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" lay-verify="name"
                           autocomplete="off"
                           placeholder="请输入机构名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">机构代码</label>
                <div class="layui-input-block">
                    <input type="text" id="code" name="code"
                           lay-verify="code"
                           autocomplete="off"
                           placeholder="请输入机构代码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">机构类型</label>
                <div class="layui-input-block">
                    <select id="type" name="type" lay-filter="type">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" id="remark" name="remark" lay-verify="remark"
                           autocomplete="off"
                           placeholder="请输入备注" class="layui-input">
                </div>
            </div>
        </form>
    </div>
</div>
</html>